<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html ng-app="duo">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Duo</title>
<!-- START stylesheets -->
<link rel="stylesheet" href="../public/stylesheets/normalize.css" />

<link rel="stylesheet" href="../public/stylesheets/style.css" />

<!-- END stylesheets -->
<script type="text/javascript" src="../public/javascripts/angular.min.js"></script>
<script type="text/javascript" src="../public/javascripts/angular-ui-router.min.js"></script>
<script type="text/javascript" src="../public/javascripts/jquery-2.2.3.js"></script>
<script>window.location.href='#/home_phone';</script>
<!-- <script type="text/javascript" src="../public/javascripts/app.js"></script> -->
</head>
<body ng-controller="main">

<div id="nav">
	<div class="logo">
		<img src="../public/images/duo-logo.jpg" alt="">
	</div>

	<div class="nav-item">
		<ul class="first">

			<li ng-repeat="nav in navList">
				<span ng-if="nav.level == 0" ui-sref="{{nav.url}}">{{nav.name}}</span>
				<span  ng-if="nav.level == 1" >{{nav.name}}</span>
				<ul ng-if="nav.level == 1">
					<li   ng-repeat="second in nav.child">
						<img style="border: 0;width: 75px;height: 88px;" class="top" src="{{second.img}}" alt="">
						<div class="bottom">{{second.name}}</div>
						<span></span>
					</li>
				</ul>
			</li>

		</ul>
	</div>

<!-- 	<div class="nav-item" ui-sref="product">产品1</div>
	<div class="nav-item"  ui-sref="main">首页</div> -->
</div>

<div ui-view=""></div>


<script>
// ———————— angular代码 START ————————


var app = angular.module('duo', ["ui.router"]);
// 路由，后台jsp动态生成
app.config(function($stateProvider) {
  $stateProvider
  .state('main', {
    url: '/',
    templateUrl: 'main.html'
  })
  <%
String[]arr=(String[])session.getAttribute("cc");
if(arr!=null){
for(int i=0; i <arr.length;i++){%> 
  .state('<%=arr[i]%>', {
    url: '/<%=arr[i]%>',
    templateUrl: 'http://localhost:8080/webapp/<%=arr[i]%>/index.html'
  })
  <%}%>
  <%}%>
 
})


app.controller('main', function($scope, $rootScope ,$state, $http) {
	// 此处地址换成对应接口地址
	$http.get("http://localhost:8080/webapp/getAllMenu1")
    .success(function (response) {

    	var realData = response.allmenu;
		var navList = new Array();

		// 数据转换，将接口数据转换成标准数据
		for(var i=0;i<realData.length;i++){

			if(realData[i].child == null){
				// 如果没有二级导航，即为一级导航，例如首页
				var tempItem = {
					"name": realData[i].menu.menuName,
			    	 "level": 0,
			     	 "url": realData[i].menu.menuPhonechain,
			     	 "order": realData[i].menu.menuOrder,
			     	 "child": ""
				};
				navList.push(tempItem);

			}else{
				// 若有二级导航，则遍历二级导航
				var tempChildList = new Array();
				for(var x=0;x<realData[i].child.length;x++){
						var tempChildItem = {
						"name": realData[i].child[x].a.menuName,
				         "level": 2,
				         "url": realData[i].child[x].a.menuPhonechain,
				         "img":realData[i].child[x].a.menuPicture
					}
					tempChildList.push(tempChildItem);
				}
				tempChildList.sort(function(a,b){return a.order>b.order?1:-1});
				
				var tempItem = {
					"name": realData[i].menu.menuName,
			    	 "level": 1,
			     	 "url": realData[i].menu.menuPhonechain,
			     	 "order": realData[i].menu.menuOrder,
			     	 "child": tempChildList
				};
				navList.push(tempItem);
				
			}
			navList.sort(function(a,b){return a.order>b.order?1:-1});
		}
		$scope.navList = navList;

    })
    .error(function(response){

    	// 接口访问失败时（测试数据）［模拟用］
    	// 0为无二级分类的一级分类 1为有二级分类的一级分类  2为二级分类
    	var data ={
			  "allmenu": [
			    {
			      "menu": {
			        "menu": null,
			        "menuChain": "aaa",
			        "menuId": 999,
			        "menuName": "一级菜单1",
			        "menuPhonechain": "aaa",
			        "menuPicture": "webapp/photo/94.7350136327216712906030_124355855000_2.png",
			        "menuOrder": 3,
			        "menus": []
			      },
			      "child": [
			        {
			          "a": {
			            "menu": null,
			            "menuChain": "aaa",
			            "menuId": 226,
			            "menuName": "二级菜单1",
			            "menuPhonechain": "aaa",
			            "menuPicture": "webapp/photo/94.7350136327216712906030_124355855000_2.png",
			            "menuOrder": 1,
			            "menus": []
			          }
			        },
			        {
			          "a": {
			            "menu": null,
			            "menuChain": "aaa",
			            "menuId": 227,
			            "menuName": "二级菜单2",
			            "menuPhonechain": "aaa",
			            "menuPicture": "webapp/photo/2.294188944240660412906030_124355855000_2.png",
			            "menuOrder": 2,
			            "menus": []
			          }
			        }
			      ]
			    },
			    {
			      "menu": {
			        "menu": null,
			        "menuChain": "aaa",
			        "menuId": 228,
			        "menuName": "一级菜单2",
			        "menuPhonechain": "aaa",
			        "menuPicture": "webapp/photo/2.294188944240660412906030_124355855000_2.png",
			        "menuOrder": 2,
			        "menus": []
			      }
			    }
			  ]
			};
		var realData = data.allmenu;
		var navList = new Array();

		// 数据转换，将接口数据转换成标准数据
		for(var i=0;i<realData.length;i++){

			if(realData[i].child == null){
				// 如果没有二级导航，即为一级导航，例如首页
				var tempItem = {
					"name": realData[i].menu.menuName,
			    	 "level": 0,
			     	 "url": realData[i].menu.menuChain,
			     	 "order": realData[i].menu.menuOrder,
			     	 "child": ""
				};
				navList.push(tempItem);

			}else{
				// 若有二级导航，则遍历二级导航
				var tempChildList = new Array();
				for(var x=0;x<realData[i].child.length;x++){
						var tempChildItem = {
						"name": realData[i].child[x].a.menuName,
				         "level": 2,
				         "url": realData[i].child[x].a.menuChain,
				         "img": realData[i].child[x].a.menuPicture
					}
					tempChildList.push(tempChildItem);
				}
				tempChildList.sort(function(a,b){return a.order>b.order?1:-1});

				var tempItem = {
					"name": realData[i].menu.menuName,
			    	 "level": 1,
			     	 "url": realData[i].menu.menuChain,
			     	 "order": realData[i].menu.menuOrder,
			     	 "child": tempChildList
				};
				navList.push(tempItem);
				
			}
			navList.sort(function(a,b){return a.order>b.order?1:-1});
		}
		$scope.navList = navList;
   //  	标准格式
   //  	var tempData ={
			//   "navList": [
			//     {
			//      "name": "首页",
			//      "level": 0,
			//       "url": "main",
			//       "child": ""
			//     },
			//     {
			//      "name": "产品",
			//      "level": 1,
			//       "url": "",
			//       "child":  [
			//             {
			//              "name": "Duo",
			//              "level": 2,
			//               "url": "Duo",
			//               "img": "../public/images/Duo-product01.png"
			//             },
			//             {
			//              "name": "Duo2",
			//              "level": 2,
			//               "url": "Duo",
			//               "img": "../public/images/Duo-product01.png"
			//             }
			//         ]
			//     }
			//   ]
			// };
		
    });
})
// ———————— angular代码 END ————————

// ———————— jQuery代码 START ————————
    $(function() {
    	var num =0;
    	var navTimer = setInterval(function(){
    		$(".nav-item  .first li").hover(
                function() {
                	$(this).find("ul").width($(window).width()); 
                    
                    $(this).find("ul").addClass('product-show');
                    $(this).find("ul").show(100);
                },
                function() {
                    $(this).find("ul").hide(300);
                    $(this).find("ul").removeClass('product-show');
                }
        );

        $(".nav-item  .first li ul li").hover(
                function() {
                    $(".nav-item  .first li ul").addClass('nav-ul-on');
                },
                function() {
                    $(".nav-item  .first li ul").removeClass('nav-ul-on');
                }
        );
        num++;
        if(num == 10){
        	clearInterval(navTimer);
        }
    },500);

    });
// ———————— jQuery代码 END ————————

</script>
</body>
</html>
